<template>
  <div>
    <va-card :title="'所有订单'" class="mb-4">

      <va-data-table
        :fields="fields"
        :data="orderList"
        :per-page="10"
      >
        <template slot="actions" slot-scope="props">
          <va-button flat small color="info" @click="info(props.rowData)" class="ma-0">
            详情
          </va-button>
          <va-button flat small color="gray" @click="edit(props.rowData)" class="ma-0">
            编辑
          </va-button>
          <va-button flat small color="danger" @click="remove(props.rowData)" class="ma-0">
            删除
          </va-button>
        </template>
      </va-data-table>
    </va-card>
    <va-modal
      v-model="showInfo"
      :title=" '详细信息' "
      :okText=" '确定' "
      :cancelText=" '返回' "
      :message=" infotext "
      :hideDefaultActions="true"
    />
    <va-modal
      v-model="showdeleconfirm"
      :title=" '确认删除' "
      :okText=" '删除' "
      :cancelText=" '取消' "
      :message=" '确认删除？' "
      @ok="dele"
    />

  </div>

</template>

<script>

  export default {
    data () {
      return {
        showInfo:false,
        showdeleconfirm:false,
        infotext:'',
        page:1,
        orderList: [],
        deleteselect: ''
      }
    },
    created(){
      this.getdata()
    },
    computed: {
      fields () {
        return [{
          name: '__slot:marker',
          width: '30px',
          dataClass: 'text-center',
        }, {
          name: 'id',
          title: '订单编号',
        },
          {
            name: 'checkinTime',
            title: '入住时间',
          }, {
            name: 'checkoutTime',
            title: '退房时间',
          },{
            name: 'username',
            title: '姓名',
          }, {
            name: 'roomNum',
            title: '房间号',
          }, {
            name: 'status',
            title: '状态',
          },  {
            name: 'price',
            title: '价格',
          },{
            name: '__slot:actions',
            dataClass: 'text-right',
          }]
      },
    },

    methods: {
      getdata() {
        var _this=this
        var fd = new URLSearchParams()
        fd.append('currentPage',_this.page)
        _this.$http.post('/api/hotelsystem/order/list',fd)
          .then(function(response) {
              if(response.data.code==80200) {
                _this.orderList=_this.orderList.concat(response.data.data.orderList)
                if(response.data.data.page.currentPage>_this.page) {
                  _this.page++
                  _this.getdata()
                }
              }
            },
            function(err){
              console.log(err)
            }
          )
      },
      info (orderData) {
        this.infotext='id : '+orderData.id+'<br/>姓名 : '+orderData.username+'<br/>身份证号码 : '+orderData.userIdCard+'<br/>入住时间 : '+orderData.checkinTime+'<br/>退房时间 : '+orderData.checkoutTime+'<br/>状态 : '+orderData.status+'<br/>楼层号 :'+orderData.floorNum+'<br/>房间号 :'+orderData.roomNum+'<br/>价格 :'+orderData.price
        this.showInfo=true
      },
      edit (orderData) {
        //this.$router.push({ name: 'order-mod', params: orderData})
      },
      remove (orderData) {
        this.showdeleconfirm=true
        this.deleteselect=orderData.id
      },
      dele(){
        //   var _this=this
        //   var fd = new URLSearchParams()
        //   fd.append('id',_this.deleteselect)
        // this.$http.post('/api/hotelsystem/order/remove',fd)
        //   .then(function(response) {
        //       if(response.data.code==80200) {
        //         _this.showmsg('删除成功')
        // _this.orderList.forEach((item, index) => {
        //   if(item.id==_this.deleteselect){
        //      _this.orderList.splice(index, 1);
        //   }
        // });
        //       }
        //       else
        //         _this.showmsg('删除失败')
        //     },
        //     function(err){
        //       console.log(err)
        //     }
        //   )
      },
      showmsg(msg) {
        this.showToast(
          msg,{
            position: 'top-center',
            duration: 2500,
            fullWidth: false,
          },
        )

      }
    },
  }
</script>
<style lang="scss">
</style>
